﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function paintCanvas() {
      var elem = document.getElementById("mycanv");
      var ctx = elem.getContext('2d');

      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, 200, 200);
      ctx.beginPath();
      ctx.arc(150, 150, 100, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.clip();

      // create radial gradient
      var grd = ctx.createRadialGradient(110, 110, 42, 110, 110, 121);
      grd.addColorStop(0, '#FFFFFF');
      grd.addColorStop(1, '#E5E5E5');

      ctx.fillStyle = grd;
      // This should be completely clipped out!
      ctx.fillRect(0, 0, 1, 1);
    }
  </script>
</head>
<body onload="paintCanvas();">
  <canvas width=200 height=200 moz-opaque="true" id="mycanv"></canvas>
</body>
</html>
